:host {
  display: flex;
  flex: 1;
  flex-direction: column;
  .graph-container {
    flex: 1 !important;
    width: 100% !important;
    height: auto !important;

    background: radial-gradient(ellipse at center, rgba(39, 39, 39, 0.05), rgba(0, 128, 0, 0.2));
  }
}

::ng-deep {
  .p-card {
    .p-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      .p-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    }
  }

  rect {
    &.body {
      stroke: var(--blue-200) !important;
    }
    &.success {
      stroke: var(--green-200) !important;
    }
    &.failed {
      stroke: var(--pink-200) !important;
    }
    &.running {
      stroke: var(--cyan-200) !important;
    }
  }

  .x6-node-selected {
    rect {
      &.default {
        stroke: var(--blue-600) !important;
        stroke-width: 1.5px !important;
        filter: drop-shadow(0 0 2px var(--blue-600));
      }
      &.success {
        stroke: var(--green-600) !important;
        stroke-width: 1.5px !important;
        filter: drop-shadow(0 0 2px var(--green-600));
      }
      &.failed {
        stroke: var(--pink-600) !important;
        stroke-width: 1.5px !important;
        filter: drop-shadow(0 0 2px var(--pink-600));
      }
      &.running {
        stroke: var(--cyan-600) !important;
        stroke-width: 1.5px !important;
        filter: drop-shadow(0 0 2px var(--cyan-600));
      }
    }
  }

  .x6-edge-selected path:nth-child(2) {
    stroke: var(--blue-600);
    stroke-width: 1.5px !important;
  }
}
